<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>LibreSpeed Example</title>
        <link rel="shortcut icon" href="favicon.ico" />
        <style type="text/css">
            html,
            body {
                margin: 0;
                padding: 0;
                border: none;
                text-align: center;
            }

            #startBtn {
                display: inline-block;
                border: 0.15em solid #000000;
                padding: 0.3em 0.5em;
                margin: 0.6em;
                color: #000000;
                text-decoration: none;
            }

            #ip {
                margin: 0.8em 0;
                font-size: 1.2em;
            }

            #chart1Area,
            #chart2Area {
                width: 100%;
                max-width: 30em;
                height: 10em;
                display: block;
                margin: 0 auto;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
        <!--THIS LIBRARY SUCKS!-->
        <script src="speedtest.js"></script>
        <script type="text/javascript">
            var s = null;
            function runTest() {
                var chart1ctx = document
                    .getElementById("chart1Area")
                    .getContext("2d");
                var chart2ctx = document
                    .getElementById("chart2Area")
                    .getContext("2d");
                var dlDataset = {
                    label: "Download",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: "butt",
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: "miter",
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [0],
                    spanGaps: false,
                };
                var ulDataset = {
                    label: "Upload",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(192,192,75,0.4)",
                    borderColor: "rgba(192,192,75,1)",
                    borderCapStyle: "butt",
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: "miter",
                    pointBorderColor: "rgba(192,192,75,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(192,192,75,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [0],
                    spanGaps: false,
                };
                var pingDataset = {
                    label: "Ping",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,220,75,0.4)",
                    borderColor: "rgba(75,220,75,1)",
                    borderCapStyle: "butt",
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: "miter",
                    pointBorderColor: "rgba(75,220,75,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,220,75,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [],
                    spanGaps: false,
                };
                var jitterDataset = {
                    label: "Jitter",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(220,75,75,0.4)",
                    borderColor: "rgba(220,75,75,1)",
                    borderCapStyle: "butt",
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: "miter",
                    pointBorderColor: "rgba(220,75,75,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(220,75,75,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [],
                    spanGaps: false,
                };

                var chart1Options = {
                    type: "line",
                    data: {
                        datasets: [dlDataset, ulDataset],
                    },
                    options: {
                        responsive: true,
                        legend: {
                            position: "bottom",
                        },
                        scales: {
                            xAxes: [
                                {
                                    display: true,
                                    scaleLabel: {
                                        display: false,
                                    },
                                    ticks: {
                                        beginAtZero: true,
                                    },
                                },
                            ],
                            yAxes: [
                                {
                                    display: true,
                                    scaleLabel: "Speed",
                                    ticks: {
                                        beginAtZero: true,
                                    },
                                },
                            ],
                        },
                    },
                };
                var chart2Options = {
                    type: "line",
                    data: {
                        datasets: [pingDataset, jitterDataset],
                    },
                    options: {
                        responsive: true,
                        legend: {
                            position: "bottom",
                        },
                        scales: {
                            xAxes: [
                                {
                                    display: true,
                                    scaleLabel: {
                                        display: false,
                                    },
                                    ticks: {
                                        beginAtZero: true,
                                    },
                                },
                            ],
                            yAxes: [
                                {
                                    display: true,
                                    scaleLabel: "Latency",
                                    ticks: {
                                        beginAtZero: true,
                                    },
                                },
                            ],
                        },
                    },
                };

                var chart1 = new Chart(chart1ctx, chart1Options);
                var chart2 = new Chart(chart2ctx, chart2Options);

                document.getElementById("startBtn").style.display = "none";
                document.getElementById("testArea").style.display = "";
                document.getElementById("abortBtn").style.display = "";
                s = new Speedtest();
                s.onupdate = function (data) {
                    var status = data.testState;
                    if (status === 1 && Number(data.dlStatus) > 0) {
                        for (
                            var i = ~~(20 * Number(data.dlProgress));
                            i < 20;
                            i++
                        )
                            chart1.data.datasets[0].data[i] = Number(
                                data.dlStatus
                            );
                        chart1.data.labels[
                            chart1.data.datasets[0].data.length - 1
                        ] = "";
                        chart1.update();
                    }
                    if (status === 3 && Number(data.ulStatus) > 0) {
                        for (
                            var i = ~~(20 * Number(data.ulProgress));
                            i < 20;
                            i++
                        )
                            chart1.data.datasets[1].data[i] = Number(
                                data.ulStatus
                            );
                        chart1.data.labels[
                            chart1.data.datasets[1].data.length - 1
                        ] = "";
                        chart1.update();
                    }
                    if (status === 2 && Number(data.pingStatus) > 0) {
                        chart2.data.datasets[0].data.push(
                            Number(data.pingStatus)
                        );
                        chart2.data.datasets[1].data.push(
                            Number(data.jitterStatus)
                        );
                        chart2.data.labels[
                            chart2.data.datasets[0].data.length - 1
                        ] = "";
                        chart2.data.labels[
                            chart2.data.datasets[1].data.length - 1
                        ] = "";
                        chart2.update();
                    }
                    ip.textContent = data.clientIp;
                };
                s.onend = function (aborted) {
                    document.getElementById("abortBtn").style.display = "none";
                    document.getElementById("startBtn").style.display = "";
                    s = null;
                    if (aborted) {
                        document.getElementById("testArea").style.display =
                            "none";
                    }
                };
                s.start();
            }
            function abortTest() {
                if (s) s.abort();
            }
        </script>
    </head>

    <body>
        <h1>LibreSpeed - Chart.js example</h1>
        <div id="testArea" style="display: none">
            <p id="ip">Please wait...</p>

            <h2>Speed</h2>
            <canvas id="chart1Area"></canvas>

            <h2>Latency</h2>
            <canvas id="chart2Area"></canvas>
            <br />
            <a href="javascript:abortTest()" id="abortBtn">Abort</a>
        </div>
        <a href="javascript:runTest()" id="startBtn">Run speedtest</a>
        <br /><br />
        Charts by <a href="http://www.chartjs.org/">Chart.js</a><br /><br /><a
            href="https://github.com/masx200/speedtest-go"
            >Source code</a
        >
    </body>
</html>
